<template>
	<view class="content">
		<uni-search-bar class="u-search" @confirm="search" @clear="clear" placeholder="请输入关键词搜索" :radius="100" cancelButton="none"/>
		<view v-if="blogs.length==0" class="none">
			<image src="../../static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<text>{{txt_no_data}}</text>
		</view>
		<view v-else class="item-container" v-for="(item, index) in blogs" :key="item.id" @click="goBlog(item.id)" >
			<text class="item-title">{{item.title}}</text>
			<text class="item-desc">{{item.description}}</text>
			<image class="img-focus" :src="item.picture" mode="widthFix" />
			<view>
				<text v-for="(tag, idx) in item.tags" class="item-tag">{{tag}}</text>
			</view>
			<view class="icons-container">
				<!-- <image v-if="good_ids.indexOf(item.id)>=0" src="../../static/icons/ic_good_fill.png" class="icon"></image> -->
				<!-- <image v-else src="../../static/icons/ic_good.png" class="icon"></image> -->
            <text @click.stop="changeGood(item.id)"
               :class="good_ids.indexOf(item.id) >= 0 ? 'iconfont icon-dianzan2 icon-good' : 'iconfont icon-dianzan2 icon-normal'">
            </text>
				<text class="icon-text">{{item.good}}</text>
				<image src="../../static/icons/ic_comment.png" class="icon"></image>
				<text class="icon-text">{{item.comments.length}}</text>
				<image src="../../static/icons/ic_count.png" class="icon"></image>
				<text class="icon-text">{{item.readCount}}</text>
			</view>
			<image class="img-avatar" :src="item.user.avatar" mode="aspectFill" @click.stop="clickShowBlogger(item.user)"></image>
			<!-- <image class="img-down" src="../../static/icons/ic_tag.png"></image> -->
			<text class="iconfont icon-ic_down2 img-down" @click.stop="drop(item.id)"></text>
		</view>
		<view v-if="blogs.length==count" class="bottom">
			<text>----我是有底线的----</text>
		</view>
		<dialog-shell ref="shell" title="博主概况" @confirm="handleConfirm">
		<text style="padding: 20rpx;">{{blogger}}</text>
		</dialog-shell>
		
<!-- 		<view v-else class="bottom">
			<text>加载中...</text>
		</view> -->
	</view>
</template>

<script>
	let page = 0
	let size = 3
	let searching = false
	let key_blogs = "@#$$%"
	export default {
		data() {
			return {
				blogs: [],
				txt_no_data: "抱歉，没有相关文章",
				good_ids:[],
				blogger:""
			}
		},
		onLoad() {
			this.$noti.register(this.$params.noti_refresh_count, this.notiRefreshCount, this)
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if(ids){
				this.good_ids = ids
			}
			//console.log(uni.getStorageInfoSync());
			let blogs = uni.getStorageSync(key_blogs)
			if(blogs){
				this.blogs = blogs
				this.count = blogs.length
			} else {
				this.getPagedBlogs()
			}
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count, this)
		},
		onPullDownRefresh() {
			page = 0
			this.count = -1
			this.blogs = []
			this.getPagedBlogs()
		},
		onReachBottom() {
			if (searching || this.blogs.length == this.count) {
				return
			}
			page++
			this.getPagedBlogs()
		},
		methods: {
			clickShowBlogger(user){
				this.blogger = "作者: " + user.nickName + "\n联系方式:" + user.email
				this.$refs.shell.show()
			},
			getPagedBlogs() {
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": page,
					"size": size
				}
				this.$req.getWithHeader(this.$params.host + this.$params.action_blogs_page, header, res => {
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture;
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					
					this.count = parseInt(res.data.message)
					//this.blogs=this.blogs.concat(res.data.data)
					//this.blogs.pash(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data]
					this.blogs.sort((blog1, blog2) => {
						let m1 = new Date(blog1.createTime).getTime()
						let m2 = new Date(blog2.createTime).getTime()
						return m1 - m2
					})
					uni.setStorageSync(key_blogs , this.blogs)
					// console.log(res.data);
				}, () => {
					uni.stopPullDownRefresh();
				})
			},
			search(e){
				//console.log(e.value);
				let kw = e.value
				if(kw.length == 0){
					return
				}
				searching = true
				this.blogs = []
				this.count = -1
				page = 0
				uni.showLoading({
					title: '搜索中...',
					mask: false
				});
				this.$req.get(this.$params.host + this.$params.action_search + kw, res =>{
					//console.log(res)
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
						this.blogs = [...this.blogs, blog]
					})
				} , () => {
					uni.hideLoading()
				})
			},
			clear(){
				searching = false
				this.blogs = []
				this.getPagedBlogs()
			},
			changeGood(id){
				let good = true
				if(this.good_ids.indexOf(id)>=0){
					good =  false
				}
				if(good){
					this.good_its = [...this.good_ids,id]
				}else{
					//splice 删除指定位置元素
					//shift 删除第一个，pop删除最后一个
					let pos = this.good_ids.indexOf(id)
					this.good_ids.splice(pos,1)
				}
				uni.setStorageSync(this.$params.key_good_ids,this.good_ids)
				//发生数据到服务器，修改点赞数量+1或-1，服务器返回最新的点赞数量
				this.postGood(id,good)
			},
			postGood(id, good){
			    uni.showLoading({
			        title: '点赞...',
			        mask: false
			    });
			    let url = this.$params.host
			    let action = good ? this.$params.action_good : this.$params.action_del_good
			    url += action
			    let data = {
			        "id": id
			    }
			    this.$req.postQuery(url, data, res => {
			        console.log(res);
			        this.blogs.forEach(blog => {
			            if(blog.id == id){
			                blog.good = res.data.data
			            }
			        })
			    }, () => {
			        uni.hideLoading()
			    })
			},
			drop(id){
				uni.showActionSheet({
					itemList: ["屏蔽", "举报"],
					success: res => {
						//console.log(res);
						if(res.tapIndex == 0){
							//使用缓存保存要屏蔽的blog的id,然后在getPagedlogs中读取缓存，匹配中的不添加到this.blogs
						}else if(res.tapIndex == 1){
							uni.showModal({
								title: '确认',
								content: '确定举报该博客吗？',
								showCancel: true,
								cancelText: '算了',
								confirmText: '举报',
								success: res => {
									if(res.confirm){
										uni.showToast({
										    title: '已举报，感谢你为净化旧浪博客提供的支持！',										
										duration: 3000
									   });
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goBlog(id){
				uni.navigateTo({
					url:'../detail/detail?id=' + id,
					success: res => {},
					fail:() => {},
					complete: () => {}
				});
			},
			refreshReadCount(id, count){
				console.log(id);
				this.blogs.forEach(blog => {
					if(id == blog.id){
						blog.readCount = count
					}
				})
			},
			notiRefreshCount(info){
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>